/* src/components/timeline/TimelineRuler.css */
.timeline-ruler {
    height: 30px; /* 固定高度 */
    background-color: #2a2a2a;
    border-bottom: 1px solid #333;
    position: sticky; /* 粘性定位，在垂直滚动时固定在顶部 */
    top: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end; /* 刻度线从底部开始向上 */
    color: #bbb;
    font-size: 0.8em;
    white-space: nowrap; /* 防止标签换行 */
    flex-shrink: 0; /* 不允许缩小 */
}

.ruler-marker {
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    transform: translateX(-50%); /* 将标记中心对齐到其left位置 */
}

.ruler-marker .marker-line {
    width: 1px;
    background-color: #555;
    height: 8px; /* 默认刻度线高度 */
}

.ruler-marker.sub-major .marker-line {
    background-color: #666;
    height: 10px; /* 次主刻度线高度 */
}

.ruler-marker.major .marker-line {
    background-color: #777;
    height: 12px; /* 主刻度线高度 */
}

.ruler-marker .marker-label {
    position: absolute;
    top: 5px; /* 标签定位在刻度线之上 */
    transform: translateX(-50%); /* 居中标签 */
    font-size: 0.7em;
    color: #aaa;
}

.ruler-marker.major .marker-label {
    font-weight: bold;
    color: #eee;
}
